<template>
  <el-dialog title="课程详情" width="80%" :visible="visible" @close="handleClose">
    <div class="mt-10">
      <h3 class="mb-20">{{courseData.courseName}}</h3>
      <el-table :data="data" v-loading="loading">
        <el-table-column prop="nickName" label="学员名称" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.nickName ? scope.row.nickName : "--"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.sex==0">男</span>
            <span v-else-if="scope.row.sex==1">女</span>
            <span v-else>--</span>
          </template> 
        </el-table-column>
        <el-table-column prop="dateOfBirth" label="生日" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.dateOfBirth">{{$utils.dateFormat(new Date(scope.row.dateOfBirth), 'yyyy-MM-dd')}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="报名时间" min-width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.signUpTime">{{$utils.dateFormat(new Date(scope.row.signUpTime), 'yyyy-MM-dd')}}</span>
            <span v-else>未报名</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt-10 t-right" v-if="total > 0">
      <el-pagination
        background
        :current-page="currentPage"
        :total="total"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible', 'courseData', 'type'],
    data () {
      return {
        data: [],
        currentPage: 1,
        pageSize: 10,
        loading: false,
        total: 0
      }
    },
    watch: {
      courseData() {
        this.currentPage = 1
        this.loadData()
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
      loadData() {
        this.loading = true
          if(this.courseData.courseId) {
            const params ={
              courseId: this.courseData.courseId,
              currentPage: this.currentPage,
              pageSize: this.pageSize,
              type: this.type
            }
            this.$api.report.getCustomerForCourse(params).then(res => {
              if(res.success){
                this.data = res.data.list
                this.total = res.data.total
                this.loading = false
              }else {
                this.loading = false
              }
            }).catch(err => {
              this.loading = false
            })
          }
        
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      },
    }
  }
</script>
